<template>
   <div class="page">
       <div v-if="loading" class="loading"><van-loading /></div>
     <div  class="search">
       <div class="searchform">
          <div class="sele-mouth one" @click="TimeSele">
            <img src="../../assets/data.png" alt="">
            <span >{{ chicoMouth }}</span>
          </div>
          <div class="sele-mouth two"  @click="changecenter">
            <span class="xiangmu" v-if="!centerName">选择中心</span>
            <span class="xiangmu" style="display:inline-block;overflow: hidden; text-overflow:ellipsis; white-space: nowrap;width:75%">{{centerName}}</span>
            <van-icon  name="arrow-down" />
          </div>
          <div class="sele-mouth mall" @click="channelSele">
            <span class="xiangmu" v-if="!channelName">选择渠道</span>
            <span class="xiangmu">{{channelName}}</span>
            <van-icon name="arrow-down" />
          </div>
        </div>
     </div>
     <div class="table-wrapper" id="searchBar" >
          <div class="hosp-name">
            <p class="tr">
              <span class="td">项目</span>
            </p>
            <p
              class="tr"
              v-for="(item, index) in tableDataList"
              :key="index"
            >
              <span class="td">{{item.name}}</span>
            </p>
          </div>
          <!--数据-->
          <div
            class="table-content"
            ref="detailScroll"
          >
            <div class="total-table one"  :style="{ transform: 'translate('+this.activeColor+'px, 0px) scale(1) translateZ(0px)' }" >
              <div class="thead">
                <div class="tr">
                  <span class="th">消费</span>
                  <span class="th" style="width:30px">到诊</span>
                  <span class="th">到诊成本</span>
                  <span class="th">到诊进度</span>
                  <span class="th">月进度</span>
                  <span class="th">操作</span>
                </div>
              </div>
              <div class="tbody">
                <p
                  class="tr"
                  v-for="(item, index) in tableDataList"
                  :key="index"
                >
                  <span class="td">{{Math.ceil(item.actual.plan_consume)}}</span>
                  <span class="td" style="width:30px">{{item.actual.arrived_num}}</span>
                  <span class="td">{{Math.ceil(item.actual.arrived_cost)}}</span>
                  <span class="td">{{item.diff.arrived_num}}</span>
                  <span class="td">{{Math.ceil(item.finish_rate)}}{{`${item.finish_rate?'%':''}`}}</span>
                  <span class="td"><a @click="changelink(item)">同比</a></span>

                </p>
              </div>
            </div>
          </div>
        </div>
     <!-- 日期选择 -->
      <van-popup
        v-model="onShow"
        position="bottom"
        :overlay="true"
        :style="{ height: '40%' }"
      >
        <van-datetime-picker
          v-model="currentDate"
          type="year-month"
          :min-date="minDate"
          @confirm="handleStartTimeOnshow"
          @cancel="handleCancelOnshow"
        />
      </van-popup>
      <!-- 中心选择 -->
      <van-popup v-model="showPicker" round position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @cancel="showPicker = false"
          @confirm="onConfirm"
        />
      </van-popup>
      <!-- 渠道选择 -->
      <van-popup v-model="showChannel" round position="bottom">
        <van-picker
          show-toolbar
          :columns="dataChannel"
          @cancel="handleChannel"
          @confirm="changeChannel"
      />
      </van-popup>
      <!-- 同比跳转 -->
       <van-popup
        v-model="timeSelePopup"
        position="right"
        :overlay="true"
        :style="{ height: '100%',  width:'80%' }"
      >
        <div class="popupbox">
          <div class="popuphead">
            <h5>{{name}}往年{{oldmouth}}月份{{channelName}}渠道数据同比</h5>
            <van-icon name="cross" @click="closeon" style="line-height: 77px;" />
          </div>
          <table class="popuptable" border="1"  cellspacing="0" cellpadding="0">
            <tr>
              <th>年月</th>
              <th>消费</th>
              <th>到诊</th>
              <th>到诊成本</th>
            </tr>
            <tr v-for="(el,idx) in oldDataList" :key="idx">
              <td>{{el.ym}}</td>
              <td>{{el.plan_consume?`¥${Math.ceil(el.plan_consume)}`:el.plan_consume}}</td>
              <td>{{el.arrived_num}}</td>
              <td>{{el.arrived_cost?`¥${Math.ceil(el.arrived_cost)}`:el.arrived_cost}}</td>
            </tr>
          </table>
        </div>
       </van-popup>
   </div>

</template>
<script>
import BScroll from 'better-scroll'
export default {
  data () {
    return {
      loading: false,
      chicoMouth: `${new Date().getFullYear()}-${new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1}`,
      onShow: false,
      currentDate: new Date(),
      minDate: new Date(2018, 0),
      showPicker: false,
      config: [], // 中心数据
      centerName: '',
      net_config_id: '',
      channel: [],
      channelName: '',
      channel_id: '',
      columns: [],
      dataChannel: [],
      showChannel: false,
      tableDataList: [],
      timeSelePopup: false,
      project_id: '',
      name: '',
      oldmouth: `${new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1}`,
      oldDataList: [],
      activeColor: ''
    }
  },
  mounted () {
    // console.log(1111)
    this.getScheduleproject()
    this.getReportprojectlist()
    if (!this.$refs.detailScroll) {
      return
    }
    this.detailScroll = new BScroll(this.$refs.detailScroll, {scrollX: true,
      probeType: 3,
      useTransition: false,
      eventPassthrough: 'vertical',
      click: true,
      bounce: false})
    this.detailScroll.on('scroll', (pos) => {
      this.activeColor = pos.x
    })
    this.$nextTick(() => {
      this.detailScroll.scrollTo(0, 0, 3500)
    })
  },
  methods: {
    TimeSele () {
      // console.log('aaa')
      this.onShow = true
    },
    handleStartTimeOnshow (value) {
      let d = new Date(value)
      let mouth = d.getMonth() + 1 < 10 ? '0' + (d.getMonth() + 1) : d.getMonth() + 1
      let time = d.getFullYear() + '-' + mouth
      if (time > `${new Date().getFullYear()}-${new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1}`) {
        this.$toast('之后日期不可查询')
      } else {
        this.isActive = false
        this.onShow = false

        this.oldmouth = mouth
        this.chicoMouth = time
        this.getReportprojectlist()
      }
    },
    handleCancelOnshow () {
      this.onShow = false
    },
    // 切换中心、
    changecenter () {
      this.columns = this.config.map(item => item.label)
      this.showPicker = true
    },
    // 中心下拉选择
    onConfirm (value) {
      this.centerName = value
      this.config.forEach(el => {
        if (el.label === value) {
          this.net_config_id = el.value
        }
      })
      this.channel_id = ''
      this.channelName = ''
      this.getScheduleproject()
      this.getReportprojectlist()
      // this.getSchedulUrl()
      this.showPicker = false
    },
    // 渠道下拉选择
    channelSele () {
      this.dataChannel = this.channel.map(item => item.label)
      this.showChannel = true
    },
    changeChannel (value) {
      this.channelName = value
      this.channel.forEach(el => {
        if (el.label === value) {
          this.channel_id = el.value
        }
      })
      this.getReportprojectlist()
      this.showChannel = false
    },
    handleChannel () {
      this.showChannel = false
    },
    // 获取中心列表/渠道列表
    getScheduleproject () {
      this.$http({
        method: 'get',
        url: this.api.scheduleproject,
        params: {
          net_config_id: this.net_config_id,
          channel_id: this.channel_id
        }
      }).then((res) => {
        this.config = [{value: '', label: '全部'}]
        this.channel = [{value: '', label: '全部'}]
        this.config.push(...res.data.data.config)
        this.channel.push(...res.data.data.channel)
      }).catch((e) => {
        this.$toast.fail('网络开小差了')
      })
    },
    // 同比跳转
    changelink (item) {
      this.project_id = item.id
      this.name = item.name
      this.getcomparereport()
    },
    closeon () {
      this.timeSelePopup = false
    },
    // 获取同比数据
    getcomparereport () {
      this.$http({
        method: 'get',
        url: this.api.comparereport,
        params: {
          month: this.month,
          net_config_id: this.net_config_id,
          channel_id: this.channel_id,
          project_id: this.project_id
        }
      }).then((res) => {
        this.oldDataList = res.data.data
        this.timeSelePopup = true
      }).catch((e) => {
        this.$toast.fail('网络开小差了')
      })
    },
    // 获取当页数据
    getReportprojectlist () {
      this.loading = true
      this.$http({
        method: 'get',
        url: this.api.reportprojectlist,
        params: {
          month: this.chicoMouth,
          net_config_id: this.net_config_id,
          channel_id: this.channel_id
        }
      }).then((res) => {
        this.loading = false
        this.tableDataList = res.data.data
      }).catch((e) => {
        this.$toast.fail('网络开小差了')
      })
    }
  }
}
</script>
<style scoped>
  /* 新增样式 */
  .search{
    width: 100%;
    /* padding: 10px; */
  }
  .searchform{
    padding: 10px;
  }
  .sele-mouth {
    display: inline-block;
    width: 35%;
    height: 32px;
    line-height: 32px;
    background:#f2f2f2;
    border-radius:3px;
    vertical-align: middle;
    position: relative;
  }
  .one{
      width: 30%
  }
  .two{
      width:40%
  }
  .sele-mouth img {
    width: 18px;
    height: 18px;
    position: absolute;
    top: 8px;
    left: 7px;
  }
  .sele-mouth span {
    font-size:14px;
    color:rgba(183,183,183,1);
    vertical-align: top;
        color:#555;
    margin-left: 33px;
    line-height: 32px;
  }
  .van-icon-arrow-down{
    position: absolute;
    right: 7px;
    top: 8px;
    color: #888888;
  }
  .mall{
    width: 25%;
  }
  /* 表格 */
  .table-wrapper {
  position: relative;
  width: 100%;
  /*height: 100%;*/
  /* margin-top: 10px; */
  padding-bottom: 60px;
  overflow: hidden;
}
.hosp-name {
  position: absolute;
  left: 0;
  display: inline-block;
  float: left;
  vertical-align: top;
  width: 20%;
  background-color: #ffffff;
  font-size: 14px;
  color: #8b8b8b;
  z-index: 1;
}
.hosp-name .tr {
  box-sizing: border-box;
  line-height: 32px;
  text-align: center;
  margin: 0;
}
.hosp-name .tr:first-child {
  /*margin: 14px 0;*/
  color: #777;
  font-weight: bold;
  /* line-height: 20px; */
}
.hosp-name .tr:first-child {
  background-color: #ffffff;
  color: #B2B2B2;
  font-size: 14px;
}
.hosp-name .tr:nth-child(2n+1) {
  background-color: #F1F7FD;
}
.hosp-name .tr:first-child {
  background-color: #ffffff;
  color: #777;
  font-size: 14px;
}
.hosp-name .tr span{
  display: block;
}

.table-content{
  display: inline-block;
  margin-left: 20%;
  width: 80%;
  text-align: left;
  vertical-align: top;
  font-size: 14px;
  overflow: auto;
  white-space:nowrap
}
  .table-content .total-table.one {
    width: 420px;
  }
  .table-content .total-table.two  {
    width: 594px;
  }
  .table-content .total-table.there{
    width:440px;
  }
  .table-content .total-table.four,  .table-content .total-table.five {
    width: 370px;
  }
/*.tbody:nth-child(2n) {*/
/*  background-color: #F1F7FD;*/
/*}*/
.total-table .thead .th{
  display: inline-block;
  padding: 0 5px;
  width: 60px;
  line-height: 32px;
  /* height: 40px; */
  vertical-align: top;
  color: #777;
  font-size: 14px;
  font-weight: bold;
}
.tbody .tr {
  width: 100%;
  height:32px;
  line-height: 30x;
  margin: 0;
}
.tbody .tr:nth-child(2n) {
  background-color: #F1F7FD;
}
.tbody .td {
  display: inline-block;
  padding: 0 5px;
  width: 60px;
  line-height:32px;
  font-weight:bold;
}
.fix-scroll-td {
    position: fixed !important;
    top: 0;
    width: 20%;
    margin: 0 !important;
    background-color: #FFFFFF;
 }
 /* table样式结束 */
 a{
   color: #409eff;
 }
 .popupbox{
   padding: 20px;
 }
 .popuphead{
   font-size: 20px;
   font-weight: bolder;
   display: flex;
   justify-content: space-between;
 }
 .popuptable{
   width: 100%;
   border: 1px solid #ccc;
   border-collapse: collapse;
 }
.popuptable tr th{
   height: 30px;
 }
 .popuptable tr td{
   text-align: center;
   height: 30px;
 }
  .xiangmu{
    margin-left: 10px !important;
  }
  .loading{
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,.3);
      z-index: 999;
  }
</style>
